<template>
	<view>
		<!-- 私信页面 -->
		<view class="top">
			<view class="navbar">
				<view class="naber-left">
					<u-icon @click="back" name="arrow-leftward" size="30" space="15" color="#C7C7CC"
						:label="auth.fromUser.nickname" labelSize="30rpx"></u-icon>
				</view>
				<view class="naber-right">
					<image width="50rpx" height="100rpx" src="@/static/songs/more.png"></image>
				</view>
			</view>
		</view>

		<!-- 私信对象 个人信息区 -->
		<scroll-view scroll-with-animation="true" :scroll-into-view="bottomId" scroll-top="700" scroll-y
			:style="{height:height}">
			<view class="messageimg" v-for="(item,index) in msgs " :key="index" :id="'id'+index">
				<!-- 收到信息时间 -->
				<view class="message-time">{{$u.timeFrom(item.time, 'yyyy年mm月dd日 MM:ss')}}</view>

				<view class="message-content" :class="userid == item.toUser.userId ? 'flag' : ''">
					<!-- 头像 -->
					<view class="userImg">
						<image :src="item.fromUser.avatarUrl" mode=""></image>
					</view>
					<!-- 主要消息 -->
					<view class="content">
						<view class="smallicon" v-if="userid !== item.toUser.userId">
							<!-- 小三角 -->
							<u-icon color="#2C2C2C" name="play-left-fill"></u-icon>
						</view>

						<view class="smallicons " v-else>
							<!-- 小三角 -->
							<u-icon v color="#2C2C2C" name="play-right-fill"></u-icon>
						</view>
						<view style="padding: 0 10upx;">{{item.msg | msgData}}</view>
						<!-- 专辑信息等 -->
						<view class="aubum">

						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 发送私信 -->
		<view class="input">
			<u-icon name="mic"></u-icon>
			<input @focus="focus" type="text" v-model="value" placeholder="发送消息" />
			<view class="sned">
				<image src="@/static/icon/index-select.png" mode="widthFix"></image>
				<image src="@/static/icon/index-select.png" mode="widthFix"></image>
				<text @click="send">发送</text>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		_getPrivateContent,
		_SendMessages
	} from '@/http/mine.js'
	export default {
		data() {
			return {
				auth: [],
				msgs: [],
				userid: '',
				value: '',
				height: '',
				bottomId: '',
			};
		},
		methods: {
			async send() {
				const res = await _SendMessages(this.userid, this.value);
				this.value = ''

			},
			focus(e) {
				this.bottomId = 'id' + (this.msgs.length - 1)
			},
			back() {
				uni.navigateBack({
					data: 1
				})
			},

		},
		async onLoad(msg) {
			this.auth = JSON.parse(msg.id)
			const res = await _getPrivateContent(this.auth.fromUser.userId)
			this.msgs = res.msgs.reverse()
			this.userid = this.auth.fromUser.userId
			// res.forEach(()={

			// })
			console.log(res);
			// this.auth = JSON.parse(msg.id)
		},
		filters: {
			msgData(v) {
				return JSON.parse(v).msg
			}
		},
		created() {
			this.height = '800px'
			uni.getSystemInfo({
				success: res => {
					this.height = res.windowHeight - 110 + 'px'
					console.log(res.windowHeight)
				}
			})
		},
		updated() {
			this.bottomId = 'id' + (this.msgs.length - 1)
		}
	}
</script>

<style lang="scss" scoped>
	.input {
		display: flex;
		align-items: center;
		height: 100upx;
		position: absolute;
		bottom: 0;
		width: 100%;
		background-color: #FEFEFE;

		input {
			background-color: #F6F6F6;
			border-radius: 50upx;
			font-size: 16upx;
			padding-left: 10upx;
			width: 60%;
			height: 50upx;
		}

		.sned {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 30%;

			image {
				width: 50upx;
				height: 50upx;
			}
		}


	}

	.top {
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.navbar {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #e5e5e5;

		.naber-left {
			display: flex;
			align-items: center;
			margin-left: 30rpx;
		}

		.naber-right {
			margin-right: 30rpx;

			image {
				width: 60rpx;
				height: 60rpx
			}
		}
	}

	.messageimg {
		width: 100%;
		display: flex;
		flex-direction: column;

		.message-content {
			display: flex;

			.userImg {
				image {
					width: 100upx;
					height: 100upx;
					border-radius: 100%;
				}
			}

			.content {
				margin-left: 20upx;
				margin-top: 10upx;
				width: auto;
				max-width: 70%;
				height: auto;
				background-color: #2C2C2C;
				color: #EEEEEE;
				border-radius: 10upx;
				padding: 20upx;
				position: relative;

				.smallicon {
					position: absolute;
					left: -20upx;
					top: 20upx;
				}
			}

		}

		.message-time {
			padding: 50upx;
			text-align: center;
			font-size: 16upx;
			color: #454545;
		}
	}
</style>
